<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<fmt:setBundle basename="top.wsuo.message.blog"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>${ param.number }<fmt:message key="blog.view.title"/></title>
    <link rel="stylesheet" href="../static/css/uikit.min.css">
    <link rel="stylesheet" href="../static/css/uikit.gradient.min.css">
    <link rel="stylesheet" href="../static/css/awesome.css">
    <script src="../static/js/jquery.min.js" type="application/javascript"></script>
    <script src="../static/js/uikit.min.js" type="application/javascript"></script>
    <script type="text/javascript">
        $(function () {
            if ('${ param.author }' === '${ user.username }') {
                $("#modify").removeClass("uk-hidden");
                $("#remove").removeClass("uk-hidden");
            }
        });
    </script>
</head>
<body class="uk-height-1-1">
<%--使用静态包含: 顶部导航栏--%>
<%@include file="/component/header.jsp" %>
<div class="uk-container uk-container-center">
    <div class="uk-grid">
        <!-- content -->
        <!-- 配置数据源 -->
        <sql:setDataSource dataSource="jdbc/mysql"
                           var="mysql"
                           scope="request"/>
        <!-- 取得查询结果集 -->
        <sql:query sql="select * from HW_Blog where number=?"
                   dataSource="${ mysql }"
                   var="listBlog"
                   scope="request">
            <sql:param value="${ param.number }"/>
        </sql:query>

        <div class="uk-width-medium-3-4">
            <!-- 输出 -->
            <c:forEach var="blog" items="${ listBlog.rows }">
                <article class="uk-article">
                    <h2>
                        <a href="view.jsp?number=${ blog.number }&author=${ blog.author }">
                                ${ blog.title }
                        </a>
                    </h2>
                    <p class="uk-article-meta">
                            ${ blog.author }
                        <fmt:message key="home.published_in"/>
                            ${ blog.create_time }
                    </p>
                    <p>
                            <%-- 默认情况下是隐藏的: hidden: 当前登录用户为作者时才显示按钮: 才可以修改--%>
                        <a id="modify" href="modify.jsp?number=${ blog.number }"
                           class="uk-hidden"><fmt:message key="blog.view.modify"/>
                        </a>
                        <a id="remove" href="remove.do?number=${ blog.number }"
                           class="uk-hidden" style="color: red">
                            <fmt:message key="blog.view.remove"/>
                        </a>
                    </p>
                    <!-- <p>文章内容</p> -->
                    <div class="post-body" itemprop="articleBody">${ blog.text }</div>
                </article>
            </c:forEach>
            <hr class="uk-article-divider">

            <div class="uk-width-medium-3-4">
                <h3>
                    <fmt:message key="blog.view.comment"/>
                </h3>
                <!-- 配置数据源 -->
                <sql:setDataSource
                        dataSource="jdbc/mysql"
                        var="mysql"
                        scope="request"/>
                <!-- 取得查询结果集 -->
                <sql:query sql="select * from HW_Comment where blognumber = ?"
                           dataSource="${ mysql }"
                           var="listComment"
                           scope="request">
                    <sql:param value="${ param.number }"/>
                </sql:query>
                <c:forEach var="comment" items="${ listComment.rows }">
                    <c:choose>
                        <%-- 如果用户名等于 --%>
                        <c:when test="${ comment.username == user.getUsername() }">
                            <%-- 每一条评论 --%>
                            <article class="uk-comment uk-comment-primary">
                                <header
                                        class="uk-comment-header">
                                    <img class="uk-comment-avatar"
                                         src="../static/img/usericon.svg"
                                         width="50" height="50" alt="">
                                    <h4 class="uk-comment-title">
                                            ${ comment.username }
                                    </h4>
                                    <ul class="uk-comment-meta uk-subnav uk-subnav-line">
                                        <li>
                                            <span>${ comment.time }</span>
                                        </li>
                                        <li>
                                            <a href="../comment/remove.do?blognumber=${ param.number }&number=${ comment.number }&author=${ param.author }" style="color: red">
                                                <fmt:message key="message.message.remove"/>
                                            </a>
                                        </li>
                                    </ul>
                                </header>
                                <div class="uk-comment-body">
                                    <p>${ comment.content }</p>
                                </div>
                            </article>
                            <hr class="uk-article-divider">
                        </c:when>
                        <c:otherwise>
                            <article class="uk-comment">
                                <header
                                        class="uk-comment-header"><img
                                        class="uk-comment-avatar" src="../static/img/usericon.svg"
                                        width="50" height="50" alt="">
                                    <h4 class="uk-comment-title">${ comment.username }</h4>
                                    <div class="uk-comment-meta">${ comment.time }</div>
                                </header>
                                <div class="uk-comment-body">
                                    <p>${ comment.content }</p>
                                </div>
                            </article>
                            <hr class="uk-article-divider">
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </div>

            <div class="uk-width-medium-3-4">
                <h3>
                    <fmt:message key="blog.view.comment_title"/>
                </h3>
                <article class="uk-comment">
                    <div class="uk-comment-body">
                        <form action="../comment/edit.do?blognumber=${ param.number }&author=${ param.author }"
                              method="post" id="form-comment" class="uk-form">
                            <div class="uk-alert uk-alert-danger uk-hidden"></div>
                            <div class="uk-form-row">
								<textarea name="content" rows="6"
                                          placeholder="<fmt:message key="blog.view.comment_tip" />"
                                          style="width: 100%; resize: none;">
                                </textarea>
                            </div>
                            <div class="uk-form-row">
                                <button type="submit" class="uk-button uk-button-primary">
                                    <i class="uk-icon-comment"></i>
                                    <fmt:message key="blog.view.commented"/>
                                </button>
                            </div>
                        </form>
                    </div>
                </article>
                <hr class="uk-article-divider">
            </div>
        </div>
        <!-- // content -->
    </div>
</div>
<%--底部栏目--%>
<%@include file="/component/footer.jsp" %>
</body>
</html>